<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>替换，克隆DOM元素</title>
		<script src="js/jquery-1.12.4.js" type="text/javascript">
			
		</script>
		
		<style type="text/css">
			body{
				text-align: center;
			}
			
			.block{
				width: 100px;
				height: 100px;
			}
			
			.block:hover{
				box-shadow: 8px 8px 8px #999;			
			}
			
			.black{
				background-color: #000;
			}
			
			.red{
				background-color: #f00;
			}
			
			.green{
				background-color: #0f0;
			}
			
			.blue{
				background-color: #00f;
			}
			
			.red, .green, .blue, .black{
				float: left;
				margin: 20px;
			}
		</style>
	</head>
	
	<body>
		
		<div>
			<span id="">
				点击后面三个框框，第一个的颜色会改变
			</span>
		</div>
		<div id="chosen">
			<div class="block black"></div>
		</div>
		
		<div id="list">
			<div class="block red"></div>
			<div class="block green"></div>
			<div class="block blue"></div>
		</div>
		
		<script type="text/javascript">
			
			$(function(){
				$('#list').click(function(e){
					var $div = $(e.target);
					
					if($div.is('.block')){
						$('#chosen>.block').replaceWith($div.clone(true));
					}
				});
				
				$('#list>.block').click(function(e){
					console.log(e.target);
				});
			});
			
		</script>
		
	</body>
</html>
